<template>
  <div id='wrap'>
    <h1>侦听模拟请求数据</h1>
    <input type="text" :disabled="isDisabled" v-model="WenTi" placeholder="请输入问题...">
    <p>问题的结果：{{ DaAn }}</p>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu15',
}
</script>

<script lang='ts' setup>
import { ref,watch } from 'vue'
import { debounce } from "lodash";
interface ResData{
  data:string
  msg:string
  code:number | string
}
function fetchDataDemo(){
  return new Promise<ResData>((resolve,reject)=>{
    setTimeout(()=>{
      resolve({
        data:'你的问题我现在还没有学会,请过两天再问问我,这几天我正在疯狂的吃数据!',
        msg:'ok',
        code:200
      })
    },2000)
  })
}
const WenTi=ref('')
const DaAn=ref('')
const isDisabled=ref(false)
watch(
  WenTi,
  debounce(async (newValue,oldValue)=>{
    console.log(newValue,'newValue');
    console.log(oldValue,'oldValue');
    isDisabled.value=true
    const {data}=await fetchDataDemo()
    DaAn.value=data
    isDisabled.value=false
  },1000)
)
</script>

<style scoped lang='scss'>

</style>